<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=devide-width,initial-scale=1.0,maximum-scale=1.0,minmum-scale=1.0,user-scalable=1.0" >
		<meta name="apple-mobile-web-app-status-bar-style"	content="#000000">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		
		<link type="text/css" rel="stylesheet" href="#"  />
		<!--<script type="text/javascript" src="js/jquery-1.10.2.js"></script>-->
		<script type="text/javascript" src="js/reset_font.js"></script>
		<title></title>
		<style>
			*{
				width:100%;height: 100%;margin:0;padding:0;
			}
			.slider-container{
				width:100%;height: 3rem;
				position:absolute;
				margin-top:5rem;
			
			}
			.slider-outer{
				width:100%;
				height: 100%;
				box-sizing: border-box;
			}
			.slider-item{
				/*width:100%;*/
				width:70px;
	            height:100%;
	            transform-style: preserve-3d;
	           /*transform-style:flat;*/
	            transition:2s;
	            position:absolute;
	            box-sizing: border-box;
	        }
			.img{
				width:100%;
				height: 100%;
				box-sizing: border-box;
				position: absolute;
				background-size: 100%;
			}
			.img:nth-child(1){
				 background: url(images/brand2/001.png) center no-repeat;
           		transform:rotateX(0) translateZ(90px);
           		/*background-size: 100%;*/
				
			}
			.img:nth-child(2){
				background: url(images/brand2/002.png) center no-repeat;
				transform:rotateX(120deg) translateZ(90px);
				/*background-size: 100%;*/
			}
			.img:nth-child(3){
				background: url(images/brand2/003.png) center no-repeat;
				transform:rotateX(240deg) translateZ(90px);
				/*background-size: 100%;*/
			}
			/*.img:nth-child(4){
				background: url(images/brand2/004.png) center no-repeat;
				transform:rotateX(270deg) translateZ(60px);
			}*/
			.btns{
				position:absolute;
				top:calc(50% - 0.25rem);
				width:100%;height: 0.5rem;
			}
			.prev,.next{
				position: absolute;
				width:0.5rem;height: 0.5rem;line-height: 0.5rem;
				font-size: 0.5rem;
				text-align: center;
				color:white;
				background: rgba(0,0,0,0.2);
			}
			.prev{left:0;}
			.next{right:0;}
		</style>
	</head>
	<body>
		<div class="slider-container">
			<div class="slider-outer">
				<div class="slider-item">
					<div class="img"></div>
					<div class="img"></div>
					<div class="img"></div>
					<!--<div class="img"></div>-->
				</div>
				<div class="slider-item">
					<div class="img"></div>
					<div class="img"></div>
					<div class="img"></div>
					<!--<div class="img"></div>-->
				</div>
				<div class="slider-item">
					<div class="img"></div>
					<div class="img"></div>
					<div class="img"></div>
					<!--<div class="img"></div>-->
				</div>
				<div class="slider-item">
					<div class="img"></div>
					<div class="img"></div>
					<div class="img"></div>
					<!--<div class="img"></div>-->
				</div>
				<div class="slider-item">
					<div class="img"></div>
					<div class="img"></div>
					<div class="img"></div>
					<!--<div class="img"></div>-->
				</div>
			</div>
			<div class="btns">
				<div class="prev" id="prev">&lt;</div>
				<div class="next" id="next">&gt;</div>
			</div>
		</div>
		
		<!--js-->
		<script>
//			var items=document.querySelector(".slider-item");
			 var items = document.getElementsByClassName("slider-item");//Array()数组 items[i]
			 for(var i=0;i<items.length;i++){
			 	var item=items[i];
			 	item.style["left"] = item.offsetWidth*i+"px";
			  
			 	item.style["transitionDelay"] = 0.3*i+"s";
			 	var sub=item.children;
			 	for(var j=0;j<sub.length;j++){
			 		var img =sub[j];
			 		img.style["backgroundPosition"] = -item.offsetWidth*i+"px";
			 	}
			 }
			
			 var num = 0;
			    document.getElementById('prev').addEventListener("click",function(){
			        var rotate = ++num*120;
			        for(var i = 0; i<items.length;i++){
			            items[i].style["transform"] = "rotateX("+rotate+"deg)";
			        }
			    })
			    var num = 0;
			    document.getElementById('next').addEventListener("click",function(){
			        var rotate = --num*120;
			        for(var i = 0; i<items.length;i++){
			            items[i].style["transform"] = "rotateX("+rotate+"deg)";
			        }
			    })
		</script>
	</body>
</html>
